<template>
    <view class="header space-between align-center w100">
        <hj-avatar-up @init="initAvatar">
            <view class="header-img over-hide">
                <hj-image mode="aspectFill" :img="avatarUrl" width="100rpx" height="100rpx" />
            </view>
        </hj-avatar-up>
        <view class="t-w flex-auto pl-24">
            <view class="ft-30 text">尊敬的微信用户UXNASD1</view>
            <view class="ft-24 mt-4 mb-6 text">低空蓝海新市场，千米之约见面会～</view>
        </view>
        <view class="mall center ft-24 t-3 br-8" v-if="isShowMall" @click="handleMall"
            >积分商城</view
        >
    </view>
</template>

<script setup>
/**
 * @description 用户信息组件 在[student-center,spread]页面中使用 后续如果使用地方够多，可以抽离到custom-ui中
 * @author yinzhi
 * @date 2025-03-18
 */
import { ref, defineComponent } from 'vue'
defineComponent({
    name: 'UserInfo'
})

const props = defineProps({
    // 是否显示积分商城按钮
    isShowMall: {
        type: Boolean,
        default: false
    }
})

// 用户头像地址
const avatarUrl = ref('http://tmp/g0449D0tAkG65cabb0f4fd8260fe85e314a0bc533955.jpeg')

// 上传头像后需要更新的方法
const initAvatar = data => {
    console.log('initAvatar', data)
}

// 跳转到积分商城
const handleMall = () => {
    uni.navigateTo({
        url: '/pages/goods/goods-list/index'
    })
}
</script>

<style scoped lang="scss">
.header {
    padding: 30rpx 40rpx;
    border-bottom: 2rpx solid #eee;
    position: relative;
    &-img {
        border: 4rpx solid #fff;
        border-radius: 56rpx;
    }
    .text {
        text-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px;
    }
    .mall {
        position: absolute;
        right: 20rpx;
        bottom: 16rpx;
        background: #fff;
        padding: 8rpx 20rpx;
    }
}
</style>
